<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13.refs_basic</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
    /*
    * refs属性用来标识自己，比如为一个输入框绑定点击事件，点击输入框之后我们要拿到输入框本身
    * 这个时候可以为输入框上绑定一个唯一的ref,可以在点击函数中使用到输入框
    * */
  class Form extends  React.Component{
      getVal=()=>{
          /*这里的refs真实DOM节点*/
          const {input1} =this.refs;
          alert(input1.value);
      }

      getBlur =()=>{
          const {input2} =this.refs;
          alert(input2.value);

      }

      render(){
          return(
              <div>
                  <input type="text" ref="input1"/>
                  <input type="button" value="提交" onClick={this.getVal}/>
                  <input type="text" onBlur={this.getBlur} ref="input2"/>
              </div>
          )
      }
  }
  
  ReactDOM.render(<Form/>,document.getElementById("app"))
</script>
</body>
</html>